<template>
  <div>
    <!-- <title-name title="考察信息填写链接"></title-name>
    <a-form-model>
      <a-row>
        <a-col  :md="10" :sm="10">
          <a-form-model-item
                  :wrapperCol="{ lg: { span: 24 }, sm: { span: 24 } }">
            <BaseInput   placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col>
          <a-button style="margin:0 20px" type="primary">复制链接</a-button>
          <a-button type="primary">生成二维码</a-button>
        </a-col>
      </a-row>
    </a-form-model> -->
    <title-name title="分包商基础信息" />
    <a-form-model 
      ref="ruleForm"
      :model="fingernailList"
      :label-col="{span: 6 }"
      :wrapper-col="{span: 18 }"
      :rules="validRules"
    >
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="分包商名称"
            prop="subcontractorName"
          >
            <BaseInput
              v-model="fingernailList.subcontractorName"
              disabled
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="主管部门"
            prop="department"
          >
            <BaseInput
              v-model="fingernailList.department"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="联系人"
            prop="contacts"
          >
            <BaseInput
              v-model="fingernailList.contacts"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="电话"
            prop="phone"
          >
            <BaseInput
              v-model="fingernailList.phone"
              :disabled="disabled"
              :max-length="11"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="公司传真"
            prop="fax"
          >
            <BaseInput
              v-model="fingernailList.fax"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="邮政编码"
            prop="postalCode"
          >
            <BaseInput
              v-model="fingernailList.postalCode"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="考察评价"
            prop="evaluate"
          >
            <BaseInput
              v-model="fingernailList.evaluate"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="单位地址"
            prop="address"
          >
            <BaseTextarea
              v-model="fingernailList.address"
              :disabled="disabled"
              style="width:100%"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    
    
    <title-name title="评定依据" />
    <a-form-model 
      ref="ruleForm"
      :model="fingernailList"
      :label-col="{span: 6 }"
      :wrapper-col="{span: 18 }"
      :rules="validRules"
    >
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="纳税人资格"
            prop="taxpayer"
          >
            <!-- <a-radio-group  v-model="fingernailList.taxpayer" name="radioGroup" :default-value="1">
              <a-radio :value="1">
                一般纳税人
              </a-radio>
                <a-radio :value="2">
                  小规模纳税人
                </a-radio>
            </a-radio-group> -->
            <a-radio-group
              v-model="fingernailList.taxpayer"
              :disabled="disabled"
              :options="taxpayerList"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="公司成立时间"
            prop="companyCreateTime"
          >
            <a-date-picker
              v-model="fingernailList.companyCreateTime"
              :disabled="disabled"
              placeholder="请选择成立时间"
              @change="onChange"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="注册资金(万)"
            prop="registerCapital"
          >
            <BaseInputNumber
              v-model="fingernailList.registerCapital"
              :min="0"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="法定代表人姓名"
            prop="legalRepresentative"
          >
            <BaseInput
              v-model="fingernailList.legalRepresentative"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="法定代表人电话"
            prop="resphone"
          >
            <BaseInput
              v-model="fingernailList.resphone"
              :disabled="disabled"
              :max-length="11"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="社会统一信用代码"
            prop="license"
          >
            <BaseInput
              v-model="fingernailList.license"
              :disabled="disabled"
              :max-length="18"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="资质证书编号"
            prop="qualificationCertificate"
          >
            <BaseInputNumber
              v-model="fingernailList.qualificationCertificate"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="资质类别等级"
            prop="qualityLevel"
          >
            <BaseInput
              v-model="fingernailList.qualityLevel"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="业主招标确定施工部位及内容"
            prop="ownerTender"
          >
            <BaseInput
              v-model="fingernailList.ownerTender"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="实际负责人姓名"
            prop="actualName"
          >
            <BaseInput
              v-model="fingernailList.actualName"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="实际负责人电话"
            prop="actualPhone"
          >
            <BaseInput
              v-model="fingernailList.actualPhone"
              :disabled="disabled"
              :max-length="11"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="安全生产许可证号"
            prop="securityLicense"
          >
            <BaseInput
              v-model="fingernailList.securityLicense"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="安全生产许可证有效期截止时间"
            prop="securityEndTime"
          >
            <a-date-picker
              v-model="fingernailList.securityEndTime"
              :disabled="disabled"
              :max-length="30"
              @change="changeEndTime"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="考察代表工程名称"
            prop="representativeProjectName"
          >
            <BaseInput
              v-model="fingernailList.representativeProjectName"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="考察代表工程规模/结构类型"
            prop="representativeProjectStructure"
          >
            <BaseInput
              v-model="fingernailList.representativeProjectStructure"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="考察代表工程总承包单位"
            prop="representativeProjectGeneralContractor"
          >
            <BaseInput
              v-model="fingernailList.representativeProjectGeneralContractor"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="近三年施工项目名称"
            prop="latestThreeYearsProjectName"
          >
            <BaseInput
              v-model="fingernailList.latestThreeYearsProjectName"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="近三年施工项目工程规模/结构类型"
            prop="latestThreeYearsProjectStructure"
          >
            <BaseInput
              v-model="fingernailList.latestThreeYearsProjectStructure"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="近三年施工项目工程总承包单位"
            prop="latestThreeYearsProjectGeneralContractor"
          >
            <BaseInput
              v-model="fingernailList.latestThreeYearsProjectGeneralContractor"
              :disabled="disabled"
              :max-length="30"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="资质等级及承揽工程范围"
            prop="qualificationLevel"
          >
            <BaseTextarea
              v-model="fingernailList.qualificationLevel"
              :disabled="disabled"
              :max-length="300"
              type="textarea"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="考察及相关方了解情况"
            prop="relatedParties"
          >
            <BaseTextarea
              v-model="fingernailList.relatedParties"
              :disabled="disabled"
              :max-length="300"
              type="textarea"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="技术质量管理情况"
            prop="technicalQuality"
          >
            <BaseTextarea
              v-model="fingernailList.technicalQuality"
              :disabled="disabled"
              :max-length="300"
              type="textarea"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="技术质量管理考察人"
            prop="technicalQualityInspector"
          >
            <a-select
              v-model="fingernailList.technicalQualityInspector"
              :disabled="disabled"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in fingernailList.memberList"
                :key="item.name"
                :value="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <!--<BaseInput  />-->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="安全管理情况"
            prop="security"
          >
            <BaseTextarea
              v-model="fingernailList.security"
              :disabled="disabled"
              :max-length="300"
              type="textarea"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="安全管理考察人"
            prop="securityInspector"
          >
            <a-select
              v-model="fingernailList.securityInspector"
              :disabled="disabled"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in fingernailList.memberList"
                :key="item.name"
                :value="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <!--<BaseInput :disabled="disabled"   :maxLength="30"   v-model="fingernailList.securityInspector" placeholder="请输入"   />-->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="合同履约能力"
            prop="contractPerformance"
          >
            <BaseTextarea
              v-model="fingernailList.contractPerformance"
              :disabled="disabled"
              :max-length="300"
              type="textarea"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="合同履约考察人"
            prop="contractPerformanceInspector"
          >
            <a-select
              v-model="fingernailList.contractPerformanceInspector"
              :disabled="disabled"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in fingernailList.memberList"
                :key="item.name"
                :value="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <!--<BaseInput  :disabled="disabled"  :maxLength="30"   v-model="fingernailList.contractPerformanceInspector" placeholder="请输入"  />-->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="综合管理水平"
            prop="comprehensiveLevel"
          >
            <BaseTextarea
              v-model="fingernailList.comprehensiveLevel"
              :disabled="disabled"
              :max-length="300"
              type="textarea"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="综合管理考察人"
            prop="comprehensiveLevelInspector"
          >
            <a-select
              v-model="fingernailList.comprehensiveLevelInspector"
              :disabled="disabled"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in fingernailList.memberList"
                :key="item.name"
                :value="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <!--<BaseInput  :disabled="disabled"   :maxLength="30"  v-model="fingernailList.comprehensiveLevelInspector" placeholder="请输入"  />-->
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    
    
    <title-name title="考察小组意见" />
    <a-form-model 
      :label-col="{span: 6 }"
      :wrapper-col="{span: 18 }"
    >
      <a-row>
        <a-col
          :md="12"
          :sm="12"
        >
          <a-form-model-item
            label="考察小组意见"
            prop="groupOpinion"
          >
            <BaseTextarea
              v-model="fingernailList.groupOption"
              :disabled="disabled"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- <a-button @click="save">保存</a-button> -->
      <a-button
        v-if="type != 'share'"
        style="float:right;"
        type="primary"
        @click="submitNextSteps"
      >
        下一步
      </a-button>
    </a-form-model>
  </div>
</template>

<script>
  import {addfingernailList ,editfingernailList , getfingernailList} from '@/api/subcontractors/subcontractors'
  import {getStatusCodeData  } from '@/api/subcontractors/labor'
  import { isEmail, isPhone, isSocialcredit, createValidator, isPostCode, isFax} from '@/utils/regExpression'
  export default {
    name: 'Service',
    props:["fingernailList",'disabled'],
    data(){
      return{
        remark:'',
        taxpayerList:[],
        form:{},
        type:'',
      // 校验规则
      // validRules: {
        // department: [{ required: true, message: '请填写主管部门', trigger: 'blur' }],
        // address: [{ required: true, message: '请填写单位地址', trigger: 'blur' }],
        // fax: [{ required: true, message: '请填写传真', trigger: 'blur' }],
        // phone: [{ required: true, message: '请填写法定代表人电话	', trigger: 'blur' }],
        // contacts: [{ required: true, message: '请填写联系人	', trigger: 'blur' }],
        // postalCode: [{ required: true, message: '请填写邮政编码	', trigger: 'blur' }],
        // evaluate: [{ required: true, message: '请填写考察评价	', trigger: 'blur' }],
        // taxpayer: [{ required: true, message: '请填写纳税人  ', trigger: 'change' }],
        // legalRepresentative: [{ required: true, message: '请填写法定代表人	', trigger: 'blur' }],
        // registerCapital: [{ required: true, message: '请填写注册资金	', trigger: 'blur' }],
        // companyCreateTime	: [{ required: true, message: '请选择公司成立时间	', trigger: 'change' }],
        // qualificationCertificate: [{ required: true, message: '请填写资质证书	', trigger: 'blur' }],
        // license: [{ required: true, message: '请填写营业执照	', trigger: 'blur' }],
        // ownerTender: [{ required: true, message: '业主招标确定施工部位及内容', trigger: 'blur' }],
        // securityLicense: [{ required: true, message: '安全生产许可证号 ', trigger: 'blur' }],
        // securityEndTime: [{ required: true, message: '请填写安全生产许可证有效期截至时间	', trigger: 'blur' }],
        // qualificationLevel: [{ required: true, message: '请填写资质等级及承揽工程范围考察及相关方了解情况	', trigger: 'blur' }],
        // representativeProjectName: [{ required: true, message: '请填写考察代表工程名称	', trigger: 'blur' }],
        // representativeProjectStructure: [{ required: true, message: '请填写考察代表工程规模结构类型	', trigger: 'blur' }],
        // representativeProjectGeneralContractor: [{ required: true, message: '请填写考察代表工程总承包单位	', trigger: 'blur' }],
        // latestThreeYearsProjectName: [{ required: true, message: '请填写近三年施工项目名称	', trigger: 'blur' }],
        // latestThreeYearsProjectStructure: [{ required: true, message: '请填写近三年施工项目工程规模结构类型	', trigger: 'blur' }],
        // latestThreeYearsProjectGeneralContractor: [{ required: true, message: '请填写近三年施工项目工程总承包单位	', trigger: 'blur' }],
        // technicalQuality: [{ required: true, message: '请填写技术质量管理情况	', trigger: 'blur' }],
        // technicalQualityInspector: [{ required: true, message: '请填写技术质量管理考察人	', trigger: 'blur' }],
        // security: [{ required: true, message: '请填写安全管理情况	', trigger: 'blur' }],
        // securityInspector: [{ required: true, message: '请填写安全管理情况考察人	', trigger: 'blur' }],
        // contractPerformance: [{ required: true, message: '请填写合同履约能力	', trigger: 'blur' }],
        // contractPerformanceInspector: [{ required: true, message: '请填写合同履约能力考察人	', trigger: 'blur' }],
        // comprehensiveLevel: [{ required: true, message: '请填写综合管理水平	', trigger: 'blur' }],
        // comprehensiveLevelInspector: [{ required: true, message: '请填写综合管理水平考察人	', trigger: 'blur' }],
        // groupOpinion: [{ required: true, message: '请填写考察小组意见	', trigger: 'blur' }],
        // relatedParties: [{ required: true, message: '请填写考察及相关方了解情况	', trigger: 'blur' }],
        // qualityLevel: [{ required: true, message: '请填写资质类别等级	', trigger: 'blur' }],
        // actualName: [{ required: true, message: '请填写实际负责人姓名	', trigger: 'blur' }],
        // actualPhone: [{ required: true, message: '请填写实际负责人电话	', trigger: 'blur' }],
          // resphone: [{ validator: createValidator(isPhone, '手机号格式不正确', false,this.validChanged), trigger: 'blur'}],
          // phone: [{ validator: createValidator(isPhone, '手机号格式不正确', false,this.validChanged), trigger: 'blur'}],
          // actualPhone: [{ validator: createValidator(isPhone, '手机号格式不正确', false,this.validChanged), trigger: 'blur'}],
          // license: [{ validator: createValidator(isSocialcredit, '社会统一信用代码格式不正确', false, this.validChanged), trigger: 'blur'}]
      // },

      
      validRules: {
        resphone: [{ validator: createValidator(isPhone, '手机号格式不正确', false,this.validChanged), trigger: 'blur'}],
        phone: [{ validator: createValidator(isPhone, '手机号格式不正确', false,this.validChanged), trigger: 'blur'}],
        actualPhone: [{ validator: createValidator(isPhone, '手机号格式不正确', false,this.validChanged), trigger: 'blur'}],
        license: [{ validator: createValidator(isSocialcredit, '社会统一信用代码格式不正确', false,this.validChanged), trigger: 'blur'}],
        fax: [{ validator: createValidator(isFax, '公司传真格式不正确', false, this.validChanged), trigger: 'blur'}],
        postalCode: [{ validator: createValidator(isPostCode, '邮政编码格式不正确', false, this.validChanged), trigger: 'blur'}],
     },
      }
    },
    created() {
      this.id = this.$route.query.id
      this.type = this.$route.query.type
      if(this.$route.fullPath=='/project/subcontractors/investigate/view'){
        this.type='view'
      }
      // if(this.type!='view' || type!='approve'){
        this.getStatusCodeData()
      // }
    },
    methods:{
      getPhone(val){
        // if(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(val))){
		if (!(isPhone.test(val))) {
          this.$message.error("手机号码输入有误，核对后请重新输入！");
          return false;
        }
      },
      getEmail(val){
        // if(!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(val))){
        if(!(isEmail.test(val))){
          this.$message.error("邮箱输入有误，核对后请重新输入！");
          return false;
        }
      },
      getFax(val){
        // if(!(/^(\d{3,4}-)?\d{7,8}$/.test(val))){
        if(!(isFax.test(val))){
          this.$message.error("传真输入有误，核对后请重新输入！");
          return false;
        }
      },
      getCodes(val){
        // if(!(/^[1-9][0-9]{5}$/.test(val))){
        if(!(isPostCode.test(val))){
          this.$message.error("邮政编码输入有误，核对后请重新输入！");
          return false;
        }
      },
      getLicense(val){
        // if(!(/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g.test(val))){
        if(!(isSocialcredit.test(val))){
          this.$message.error("统一社会信用代码输入有误，核对后请重新输入！");
          return false;
        }
      },
      validChanged(data) {
        this.$emit('validChanged', data)
      },
      getfingernailList(){
        getfingernailList({id:this.id}).then((res)=>{
          this.fingernailList = res
        })
      },
      getStatusCodeData(){
        getStatusCodeData({type:'9'}).then(res=>{
          this.taxpayerList = res.data
          this.taxpayerList.forEach(item=>{
            item.label=item.name
            item.value=item.id
          })
        })
      },
      submitNextSteps(){
        // this.$refs.ruleForm.validate(valid=>{
        //   if(valid){
            this.$emit("submitNextSteps",this.fingernailList)
        //   }
        // })
      },
      onChange(value,dateString){
        this.fingernailList.companyCreateTime = dateString
      },
      changeEndTime(value,dateString){
        this.fingernailList.securityEndTime = dateString
      },
      save(){
        editfingernailList(this.fingernailList).then(res=>{
          if(res.code=='200'){
            this.$message.success("新增成功")
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
/deep/ .radio-box {
    .ant-radio-wrapper {
        position: static !important;
    }
    .ant-radio-group {
        margin-top: 7% !important;
        display: flex;
    }
}
</style>
